<template>
  <div class="box1">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="active" finish-status="success">
          <el-step title="步骤 1" description="选择转赠好友"></el-step>
          <el-step title="步骤 2" description="选择转增藏品"></el-step>
          <el-step title="步骤 3" description="确认转增"></el-step>
        </el-steps>
        <el-button style="margin-top: 12px" @click="next">下一步</el-button>
      </div>
      <div class="main">
        <div class="open0" v-if="active == 0">请按步骤完成藏品转赠</div>

        <div class="open1" v-if="active == 1">
          <el-input
            class="input1"
            v-model="user.id"
            placeholder="请输用户编号"
            @blur="queryUserByid"
          ></el-input>
          <div class="userdd" v-if="openUser">
            <img class="userimg" :src="user.avatar" />
            <span class="dd">用户名：{{ user.name }}</span>
            <span class="ff">编 号：{{ user.id }}</span>
          </div>
          <el-empty v-else description="未找到该用户"></el-empty>
        </div>

        <div class="open2" v-if="active == 2">
          <el-select
            v-model="value"
            placeholder="请选择要转赠的藏品"
            @change="optionsChange"
            @focus="queryCoolectionById"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.name + '-' + item.id + '号'"
              :value="index"
            >
            </el-option>
          </el-select>
          <div class="userdd" v-if="openAntique">
            <img
              class="userimg"
              style="border-radius: 20%"
              :src="antique.imgsrc"
            />
            <span class="dd">藏品名：{{ antique.name }}</span>
            <span class="ff1">编 号：{{ antique.id }}</span>
          </div>
          <el-empty v-else description="暂无可转赠藏品"></el-empty>
        </div>

        <div class="open3" v-if="active == 3">
          <div class="sp" @click="zuanzeng">立即转赠</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import UserApi from "@/api/user/UserApi";
import CoolectionAntiqueApi from "@/api/collection/CoolectionAntiqueApi";
export default {
  name: "IncreaseMarket",
  data() {
    return {
      active: 0,
      openUser: false,
      user: {
        id: "",
        avatar: "",
        name: "",
      },
      options: [
        {
          id: "编号",
          aid: "藏品",
          name: "藏品名",
          imgsrc: "藏品地址",
        },
      ],
      openAntique: false,
      antique: {
        id: "",
        name: "",
        imgsrc: "",
      },
      value: "",
    };
  },

  methods: {
    next() {
      if (this.active == 3) {
        console.log(this.user, this.antique);
      }

      if (this.active == 1) {
        if (this.user.name == "") {
          this.$message.error("请选择要转增的用户");
          return;
        }
      }
      if (this.active == 2) {
        if (this.antique.name == "") {
          this.$message.error("请选择要转增的藏品");
          return;
        }
      }
      if (this.active++ > 2) this.active = 0;
      // console.log(this.active);
    },
    optionsChange(value) {
      // console.log(value);
      this.antique = this.options[value];
      this.openAntique = true;
    },
    queryUserByid() {
      if (this.user.id == "") {
        return;
      }
      console.log(this.user.id);
      UserApi.queryUserByid(this.user.id).then((res) => {
        if (res.data.code != 1) {
          this.$message.error(res.data.message);
        } else {
          this.openUser = true;
          this.user = res.data.data;
          this.$message.success(res.data.message);
        }
      });
    },

    queryCoolectionById() {
      // console.log(sessionStorage.getItem("userId"))
      CoolectionAntiqueApi.queryUserCoolecById(
        sessionStorage.getItem("userId")
      ).then((res) => {
        if (res.data.code != 1) {
          this.$message.error(res.data.message);
        } else {
          // console.log(res.data.data)
          this.options = res.data.data;
          this.$message.success(res.data.message);
        }
      });
    },
    zuanzeng() {
      console.log(this.user);
      console.log(this.antique);
      CoolectionAntiqueApi.zhuangzeng(
        this.user,
        this.antique,
        sessionStorage.getItem("userId")
      ).then((res) => {
        console.log(res.data);
        if (res.data.code != 1) {
          this.$message.error(res.data.message);
          this.active = 0;
          this.user = {
            id: "",
            avatar: "",
            name: "",
          };
          this.antique = {
            id: "",
            name: "",
            imgsrc: "",
          };
          this.openUser=false;
          this.openAntique=false;
        } else {
          this.$message.success(res.data.message);
          this.active = 0;
          this.user = {
            id: "",
            avatar: "",
            name: "",
          };
          this.antique = {
            id: "",
            name: "",
            imgsrc: "",
          };
          this.openUser=false;
          this.openAntique=false;
        }
      });
    },
  },
};
</script>

<style scoped>
.box-card {
  width: 1106px;
  height: 500px;
  margin: 4% auto;
}
.main {
  width: 1063px;
  height: 282px;
  /* background: rgb(192, 184, 184); */
}
.open0 {
  font-size: 31px;
  color: #7e7e7e;
  line-height: 61px;
  /* margin-top: 8px; */
  position: relative;
  /* margin: 0 auto; */
  left: 33%;
  top: 37%;
}
.input1 {
  width: 30%;
  position: relative;
  top: 10px;
  left: 35%;
}
.userdd {
  width: 300px;
  height: 178px;
  background-color: rgb(0, 0, 0, 0.04);
  margin: 6% auto;
  border-radius: 9%;
}
.userimg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  top: 26px;
  left: 8px;
}
.dd {
  position: relative;
  top: -40px;
  left: 29px;
  font-size: 14px;
  font-weight: 700;
  color: #000;
}
.ff {
  position: relative;
  left: -53px;
  font-size: 17px;
  color: #7e7e7e;
  line-height: 20px;
  margin-top: 8px;
}
.ff1 {
  display: inline-block;
  float: right;
  margin-right: 73px;
  margin-top: -17px;
}
.sp {
  width: 300px;
  height: 46px;
  background: linear-gradient(90deg, #ff7a64, #e61f1a);
  border-radius: 23px;
  color: #fff;
  padding-left: 24px;
  font-size: 14px;
  line-height: 46px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 10% auto;
}
.sp::after {
  content: "";
  background: url(//static.theone.art/pc/images/pic-home/buy.png) no-repeat 0;
  background-size: 24px 24px;
  position: absolute;
  right: 24px;
  width: 24px;
  height: 100%;
}
</style>